<template>
  <view>

    <view class="back"></view>
    <view
        :style="{
      height: statusHeight+'px'
    }"
        style="background-color: #f5f5f5;position: fixed;top:0;width: 100%;z-index:999;left:0;"
    >
    </view>
    <view
        :style="{
      height: statusHeight+'px'
    }"
    ></view>

    <view class="split"></view>

    <view class="box-box">
      <view class="box" style="padding: 10rpx">
        <!--  用户基础信息  -->
        <emp-info-card
            :emp="empSelf"
        ></emp-info-card>
      </view>

      <view
          v-if="userSelf.isAdmin"
          class="split"></view>

      <view
          v-if="userSelf.isAdmin"
          class="box">
        <view class="menu-box">
          <!-- 企业管理 -->
          <view class="menu"
                @click="$kt.router.navTo('/pages/enterpriseMg/enterpriseMg')">

            <view class="menu-icon-box">
              <image
                  mode="aspectFill"
                  class="menu-icon"
                  :src="$kt.file.byPath('image/enterprise.svg')"></image>
            </view>
            <view class="menu-text">
              {{ "Enterprise Management" }}
            </view>
          </view>

          <view class="split-line"></view>

          <!-- 部门管理 -->
          <view class="menu"
                @click="$kt.router.navTo('/pages/departmentMg/departmentMg')">

            <view class="menu-icon-box">
              <image
                  mode="aspectFill"
                  class="menu-icon"
                  :src="$kt.file.byPath('image/department.svg')"></image>
            </view>
            <view class="menu-text">
              {{ "Department Management" }}
            </view>
          </view>

          <view class="split-line"></view>

          <!-- 证书管理 -->
          <view class="menu"
                @click="$kt.router.navTo('/pages/certificateMg/certificateMg')">
            <view class="menu-icon-box">
              <image
                  mode="aspectFill"
                  class="menu-icon"
                  :src="$kt.file.byPath('image/certificate.svg')"></image>
            </view>
            <view class="menu-text">
              {{ "Certificate Management" }}
            </view>
          </view>

          <view class="split-line"></view>

          <!-- 员工管理 -->
          <view class="menu"
                @click="$kt.router.navTo('/pages/employeeMg/employeeMg')">
            <view class="menu-icon-box">
              <image
                  mode="aspectFill"
                  class="menu-icon"
                  :src="$kt.file.byPath('image/emp.svg')"></image>
            </view>
            <view class="menu-text">
              {{ "Employee Management" }}
            </view>
          </view>

        </view>
      </view>

      <view class="split"></view>

      <view class="box">
        <view class="grid-box-box">
          <!-- 用户协议 -->
          <view class="grid-box">
            <view class="grid-icon-box">
              <image
                  mode="aspectFill"
                  class="grid-icon"
                  :src="$kt.file.byPath('image/userAgreement.svg')"></image>
            </view>
            <kt-one-line-text
            :text=" 'User Agreement' "
            font-size="24rpx"
            ></kt-one-line-text>
          </view>
          <!-- 隐私协议 -->
          <view class="grid-box">
            <view class="grid-icon-box">
              <image
                  mode="aspectFill"
                  class="grid-icon"
                  :src="$kt.file.byPath('image/privacyAgreement.svg')"></image>
            </view>
<!--            <view class="grid-text">{{ "Privacy Agreement" }}</view>-->
            <kt-one-line-text
            :text=" 'Privacy Agreement' "
            font-size="24rpx"
            ></kt-one-line-text>
          </view>
          <!-- 关于 -->
          <view class="grid-box">
            <view class="grid-icon-box">
              <image
                  mode="aspectFill"
                  class="grid-icon"
                  :src="$kt.file.byPath('image/about.svg')"></image>
            </view>
            <kt-one-line-text
            :text=" 'About' "
            font-size="24rpx"
            ></kt-one-line-text>
          </view>
          <!-- 退出登录 -->
          <view class="grid-box" @click="isLogoutModal = true">
            <view class="grid-icon-box">
              <image
                  mode="aspectFill"
                  class="grid-icon"
                  :src="$kt.file.byPath('image/logout.svg')"></image>
            </view>
<!--            <view class="grid-text">{{ "Logout" }}</view>-->
            <kt-one-line-text
            :text=" 'Logout' "
            font-size="24rpx"
            ></kt-one-line-text>
          </view>
        </view>
      </view>

    </view>

    <view style="height: 120rpx"></view>

    <u-popup
      :show="isLogoutModal"
      mode="bottom"
      :mask-close-able="false"
      :safe-area-inset-bottom="true"
      @close="isLogoutModal = false"
    >
      <view class="u-popup-content" style="padding: 30rpx;box-sizing: border-box">
        <view style="font-size: 40rpx;text-align: center">
          {{'Are you sure to logout?'}}
        </view>
        <view style="height: 30rpx"></view>
        <view>
          <kt-button
          @click="logout"
          >
            {{ "Confirm" }}
          </kt-button>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
import UserCommitInfoCard from "@/components/user-info/user-common-info-card";

export default {
  components: {UserCommitInfoCard},
  data() {
    return {
      userSelf: {
      },
      empSelf:{},
      statusHeight: 0,
      isLogoutModal: false
    };
  },
  created() {
    this.init();
  },
  mounted() {
  },
  methods: {
    init() {
      this.userSelf = this.$kt.userAccount.getSelf();
      this.empSelf = this.$emp.getSelf();
      this.statusHeight = uni.getSystemInfoSync().statusBarHeight;
    },
    logout() {
      this.$kt.storage.set("token", null);
      this.$kt.router.reLaunch('/pages/login/login');
    }
  }

}
</script>

<style lang="scss" scoped>
@import "/components/user-info/user-info.css";

.back {
  position: fixed;
  background-color: #f8f8f8;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.box-box {
  padding: 0 20rpx 0 20rpx;
  box-sizing: border-box;
}

.split {
  height: 20rpx;
}


.grid-box-box{
  display: flex;
  text-align: center;
  height: 80rpx;
}

.grid-box {
  vertical-align: top;
  position: relative;
  top: 0;
  width: 100%;
}

.grid-box:active {
  .grid-icon {
    transform: scale(.95);
  }
}

.grid-icon {
  width: 40rpx;
  height: 40rpx;

}

.grid-text {
  display: inline-block;
  text-align: center;
  font-size: 24rpx;
  top: 0;
  width: 80%;
}


.title {
  font-size: 32rpx;
  padding: 20rpx;
  box-sizing: border-box;
  font-weight: bold;
}

.line {
  width: 100%;
  height: 1rpx;
  background-color: #F0F0F0;
}


.menu-box {
  box-sizing: border-box;
  background-color: #FFFFFF;
  border-radius: 20rpx;


  .menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20rpx 20rpx;
    box-sizing: border-box;
    background-color: #FFFFFF;
    margin-bottom: 20rpx;


    .menu-icon-box {
      width: 50rpx;
      height: 40rpx;
    }

    .menu-icon {
      width: 40rpx;
      height: 40rpx;
    }


  }

}

.menu:active {
  opacity: .6;
}

.split-line{
  width: 100%;
  height: 1rpx;
  background-color: #F0F0F0;
}


</style>
